/**
 * https://item.jd.com/100006587871.html#none 参考创作地址
 * 
 * obj可配置的属性
 * {
 *     elem:"" 绑定弹出按钮对象,可以是id也可以是class
 *     data:"" 绑定数据存储元素，只能是id
 * }
 */

layui.use(['layer','jquery','element','laypage'],function(){
    let layer = layui.layer,
    $ = layui.$,
    element = layui.element,
    laypage = layui.laypage;
    let openScan = '<div id="magnifier-window" class="layui-hide"><div class="layui-tab"><ul class="layui-tab-title"><li class="layui-this">放大展示</li></ul><div class="layui-tab-content"><div class="layui-tab-item layui-show"><div class="magnifier-content"><div class="magnifier-left"><div class="magnifier-mask"></div></div><div class="magnifier-right"><p class="text title"></p><p class="price"></p><div id="magnifier-window-imgbox"><div class="image-list"></div><div class="img-page layui-hide"><i class="layui-icon layui-icon-left"></i><span class="pageLimt">1/2</span><i class="layui-icon layui-icon-right"></i></div></div></div></div></div></div></div></div>';
    
    var init_val = {
        PageSize:8, //一页图片总数
        ImageIndex:0,   //显示第几个图片
        Inspection:true,    //自检模式
        HistoryMode:false,  //是否每次打开都返回之前选中的图片序号
    };

    var  Mask = {   //蒙版属性
        width:720,
        height:550
    };

    var BigImg = {  //放大属性
        width:820,
        height:820
    };

    //初始化
    function _init(obj){
        _setValue(obj); //修改默认数据

        if(init_val.Inspection){
            //异常过滤
            let error = _error(obj);
            if(Number.isInteger(error)){
                console.log(_errorLog(error));
                layer.msg("警告："+_errorLog(error),{icon: 2});
                return false;
            }
        }

        //处理初始变量
        //1.绑定元素
        $(obj.elem).addClass("product-magnifier")
        //2.绑定数据
        if($(obj.elem).data("id")){
            obj.data = $(obj.elem).data("id")
        }

        //添加按钮
        _addBtn(obj);
        _openScanObj();
        
        //获取数据
        if(obj.data){
            $(obj.data).addClass("layui-hide");
            obj.ImageArr = _upData(obj.data);
        }

        obj.init_val = init_val;
        window.qy._obj = obj;
    }

    //设置初始数据
    function _setValue(obj){
        //设定初始数据
        if(obj.index){
            init_val.ImageIndex = obj.index;
        }else if(obj.check||obj.Check===false){
            init_val.Inspection = obj.check;
        }else if(obj.history||obj.history===false){
            init_val.HistoryMode = obj.history;
        }
    }

    //修改重载
    function _save(data){
        //读取数据
        let obj  = window.qy._obj;
        //设定初始数据
        if(data.index||data.index===0){
            init_val.ImageIndex = data.index;
            _modifyIndax(obj);
            window.qy._obj.init_val.ImageIndex = init_val.ImageIndex;
        }else if(data.Check||data.Check===false){
            init_val.Inspection = data.Check;
        }
    }

    //过滤异常情况
    function _error(obj){
        if( !($(obj.elem).length>0) ){
            return 1;
        }else if( !$(obj.elem).data("id")&&!obj.data){  //|| !(obj.ImageArr.length<1)
            return 2;
        }else if( $(obj.elem).data("id")&&!$($(obj.elem).data("id")) ){
            return 3;
        }/*else if( obj.ImageArr.length<=init_val.ImageIndex ){
            return 4;
        }*/
    }

    //异常反馈话语
    function _errorLog(index){
        switch(index){
            case 1:
                return "未绑定，或绑定元素不存在！";
            case 2:
                return "未获取到数据！";
            case 3:
                return "绑定数据元素不存在！";
            case 4:
                return "图片序号超出图片总数量！";            
        }
    }

    //添加按钮以及事件 -- 后续需要可以配置方位，以及大小
    function _addBtn(obj){
        let btnHtml = $('<i class="layui-icon layui-icon-search"></i>');
        $(".product-magnifier").append(btnHtml);
        btnHtml.click(function(){
            _btnClickFun(obj); //加载弹窗事件
            _moveToggleImg();   //加载图片随鼠标切换事件
            _magnifierMoveSee();    //加载放大查看图片
        })
    }

    //按钮点击弹窗事件
    function _btnClickFun(obj){
        $("#magnifier-window").removeClass("layui-hide");
        layer.open({
            type:1,
            title:'商品展示',
            content:$("#magnifier-window"),
            end:function(){
                $("#magnifier-window").addClass("layui-hide");
                console.log(init_val);
                if(init_val.HistoryMode){   //返回打开时的选中图片
                    _modifyIndax(obj);
                }
            }
        })
    }

    //切换图片事件
    function _moveToggleImg(){
        $("#magnifier-window .image-list img").hover(
            function () {
                $(this).siblings().removeClass("active");
                $(this).addClass("active");
                //切换大图
                $(".magnifier-content .magnifier-left .magnifier-mask img").attr("src",$(this).attr("src"))
            },
            function () {
             // $(this).removeClass("hover");
            }
        );
    }

    //大图放大查看模式
    function _magnifierMoveSee(){
        $(".magnifier-content .magnifier-left .magnifier-mask").hover(
            function(){
                $(this).find('img').addClass("active");
                _followMove(this);
            },
            function () {
                $(this).find(".active").attr("stytle","");
                $(this).find('img').removeClass("active");
            }
        )
    }

    //跟随移动效果
    function _followMove(obj){
        var x = 0,y=0;

        $(obj).bind('mousemove',function(e){
            x = e.offsetX > 0 ? e.offsetX : 0;
            y = e.offsetY > 0 ? e.offsetY : 0;

            var overTop = -(BigImg.height - Mask.height),
            overLeft = -(BigImg.width - Mask.width),
            top = ( y/Mask.height * overTop ),
            left = ( x/Mask.width * overLeft ); 

            top = top>overTop ? parseInt(top) : overTop;
            left = left>overLeft ? parseInt(left) : overLeft;
            //移动大图
            $(this).find(".active").stop().animate({
                "top":top+"px",
                "left":left+"px"
            },10) 
        });
    }

    //获取数据
    function _upData(obj){
        //获取数据
        let imgList = [],
        PageIndex = 1,
        PageCount = $(obj).find("input[name='imgsrc']").length,
        imgHtml = "";    //页码
        $(obj).find("input[name='imgsrc']").each(function(index,e){
            imgList[index] = $(this).val();
            //渲染页面 init_val.ImageIndex
            if(index%init_val.PageSize==0){ 
                imgHtml += index==0 ? '<div class="'+(Math.ceil((init_val.ImageIndex+1)/init_val.PageSize) == PageIndex ? 'page-active' : 'layui-hide')+' imageBox_'+PageIndex+' layui-anim">' : '</div>';
                if(index<PageCount&&index!=0){    //判断是否有下一页
                    PageIndex++;
                    imgHtml+='<div class="'+(Math.ceil((init_val.ImageIndex+1)/init_val.PageSize) == PageIndex ? 'page-active' : 'layui-hide')+' imageBox_'+PageIndex+' layui-anim">';
                }
            }
            imgHtml += '<img '+(index==init_val.ImageIndex ? 'class="active"' : '')+' src="'+$(this).val()+'" />';
            if(index==PageCount-1){
                imgHtml += "</div>"
            }
        });
        $("#magnifier-window").find(".magnifier-left .magnifier-mask").html('<img src="'+imgList[(init_val.ImageIndex)]+'" />');
        $("#magnifier-window").find(".magnifier-right .title").text($(obj).find(".title").text());
        $("#magnifier-window").find(".magnifier-right .price").html('<span class="t">售价</span>'+$(obj).find(".price").text());
        $("#magnifier-window").find(".magnifier-right .image-list").html(imgHtml);

       //分页
       if(imgList.length>init_val.PageSize) _page(imgList);
       else {
            $(".imageBox_1").removeClass("layui-anim-fadeout");
            $(".imageBox_1").addClass("layui-anim-fadein");
            $(".imageBox_1").removeClass("layui-hide")
            $(".imageBox_1").addClass("page-active")
       }
       return imgList;
    }

    //分页
    function _page(obj,bool=true){
        $(".img-page").removeClass("layui-hide");
        let CountPage = Math.ceil(obj.length/init_val.PageSize); 
        let NowPage = Math.ceil((init_val.ImageIndex+1)/init_val.PageSize)<1 ? 1 : Math.ceil((init_val.ImageIndex+1)/init_val.PageSize);    //当前页
        _switch(NowPage,CountPage);
        //翻页事件
        if(bool){   //是否添加事件
            $("#magnifier-window").find(".magnifier-right .layui-icon-left,.magnifier-right .layui-icon-right").click(function(){
                if($(this).hasClass("layui-icon-left")){
                    NowPage = NowPage>1 ? NowPage-1 : 1;
                }else{
                    NowPage = NowPage<CountPage ? NowPage+1 : CountPage;
                }
                _switch(NowPage,CountPage,true);
            })
        }
    }

    //切换分页
    function _switch(NowPage,CountPage,bool=false){
        //修改分页条内容
        $("#magnifier-window").find(".magnifier-right .pageLimt").text(NowPage+"/"+CountPage);
        //翻页
        $("#magnifier-window-imgbox .image-list .page-active").removeClass("layui-anim-fadein");
        $("#magnifier-window-imgbox .image-list .page-active").addClass("layui-anim-fadeout");
        $("#magnifier-window-imgbox .image-list .page-active").addClass("layui-hide");
        $("#magnifier-window-imgbox .image-list .page-active").removeClass("page-active");

        $(".imageBox_"+NowPage).removeClass("layui-anim-fadeout");
        $(".imageBox_"+NowPage).addClass("layui-anim-fadein");
        $(".imageBox_"+NowPage).removeClass("layui-hide")
        $(".imageBox_"+NowPage).addClass("page-active")
        if(bool){   //翻页是否重新锁定预览图片
            $("#magnifier-window-imgbox .image-list").find(".active").removeClass("active");
            $($("#magnifier-window-imgbox .image-list .page-active").find("img").get(0)).addClass("active");
            $("#magnifier-window").find(".magnifier-left .magnifier-mask img").attr("src",$("#magnifier-window-imgbox .image-list").find(".active").attr("src"));
        }
    }

    //添加弹窗
    function _openScanObj(){
        if(!$("#magnifier-window").length||$("#magnifier-window").length<1){
            $('body').append(openScan)
        }else{
            //报错
        }
    }

    //修改选定图片
    function _modifyIndax(obj){
        if(init_val.ImageIndex>=obj.ImageArr.length){ layer.msg("警告："+_errorLog(4),{icon: 2}); return false; }
        if(obj.ImageArr.length>init_val.PageSize)  _page(obj.ImageArr,false);
        $("#magnifier-window").find(".magnifier-left .magnifier-mask img").attr("src",obj.ImageArr[init_val.ImageIndex]);
        $("#magnifier-window-imgbox .image-list").find(".active").removeClass("active");
        $($("#magnifier-window-imgbox .image-list").find("img").get(init_val.ImageIndex)).addClass("active");
    }

    let qy = {
        init:_init,
        save:_save, //修改
    };

    window.qy = qy;
})